<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blog-single</title>
    <link rel="stylesheet" type="text/css" href="bootstrap-4.5.0/dist/css/bootstrap.css"/>
    <!-- jQuery文件 -->
    <script src="JS/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <!-- Bootstrap插件依赖文件 -->
    <script src="bootstrap-4.5.0/dist/js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
    <!-- jQuery插件 -->
    <script src="bootstrap-4.5.0/dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <!-- 加载font awesome图标库 -->
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css"/>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <script src="bootstrap-4.5.0/dist/js/bootstrap.min.js"></script>
    <link href="css/shop_single.css" rel="stylesheet" type="text/css">
    <link href="owl.carousel/owl.carousel.css" rel="stylesheet">
    <link href="owl.carousel/owl.theme.css" rel="stylesheet">
    <script src="JS/jquery-3.2.1.js"></script>
    <script src="owl.carousel/owl.carousel.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-12 col-md-8 text-left text-center ">
            <i class="fa fa-user"></i>　
            <a href="#">Login</a>　
            <i class="fa fa-pencil"></i>　
            <a href="#">Register</a>　
            <i class="fa fa-cart-plus"></i>　
            <a href="#">Checkout</a>　
        </div>
        <div class="col-12 col-md-4 text-right text-center">
            <i class="fa fa-heart"></i>　
            <a href="#">Wishlist</a>　
            <i class="fa fa-angle-down"></i>　
            <a href="#">USD</a>　
        </div>
    </div>
</div>
<div class="tu m-0 p-0">
    <div class="jumbotron jumbotron-fluid text-white d-flex align-items-center m-0 p-0">
        <div class="container">
            <div class="container kuai">
                <div class="row">
                    <div class="col-12 col-md-auto text-center">
                        <img src="images/logo.png">
                    </div>
                    <div class="col-12  col-md-4 ml-auto  form-group ">
                        <input class="form-control" type="text" placeholder="search... ">
                        <button class="btn an_niu">
                            <i class="fa fa-search"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<nav class="navbar navbar-expand-lg navbar-light pt-0 pb-0">
    <a class="navbar-brand " href="#"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-lg-center" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item ml-lg-auto">
                <a class="nav-link p-3" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="services.html">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="#">Gallery</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="#">Bolg</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="#">Shop</a>
            </li>
            <li class="nav-item mr-lg-auto">
                <a class="nav-link p-3" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container-fluid">
<!--    第一部分 雪人图片-->
    <div class="container-fluid baijing text-center col-12">
        <div class="bai_jing_tu">
            <h1>Shop Single</h1>
            <p>————————————————</p>
            <p>————————</p>
            <h5>Home<span class="yang_se_go_yon"> / Shop Single</span></h5>
        </div>
    </div>
<!--第二部分-->
    <div class="container mt-5">
        <div class="row">
            <div class="col-12 col-lg-8">
                <!--        第二部分左边 第一个 放大图片-->
                <div class="row">
                    <div class="col-12 col-md-6 py-3 tu2">
                        <img src="images/shop_product.jpg">
                    </div>
                    <div class="col-12 col-md-6 py-3 " id="app">
                        <h5>Hand Made Jewellery</h5>
                        <p>$ 20.00</p>
                        <div class="rating">
                            <span class="fa fa-star text-warning"></span>
                            <span class="fa fa-star text-warning"></span>
                            <span class="fa fa-star text-warning"></span>
                            <span class="fa fa-star text-warning"></span>
                            <span class="fa fa-star text-warning"></span>
                        </div>
                        <p class="item_text"> But I must explain to you how all this mistaken idea of denouncing pleasure and praising
                            pain was born and I will give you a complete account of the system, and expound the
                            actual teachings of the great explorer of the truth, the master-builder of human
                            happiness.Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
                            adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
                            magnam aliquam quaerat voluptatem. Ut enim ad minima veniam.
                        </p>
                        <button class="btn btn-light" v-on:click="shu--">-</button>
                        <span>
                            <input type="text" class="su_ru_kuan btn btn-light" v-model="shu">
                            <button class="btn btn-light" v-on:click="shu++">+</button>
                            <button class="btn btn-danger an_niu3">ADD TO CART</button>
                            <a href="#" class="add-fav btn btn-dark"><i class="fa fa-heart-o"></i></a>
                        </span>
                        <p class="mt-2">Categories:  <span class="tu_biao">knitted hats, Tank tops</span></p>
                    </div>
                </div>
<!--                点击换内容 第二部分左边 第二个-->
                <ul class="nav nav-tabs">
                    <li class="nav-item ">
                        <a class="nav-link active " data-toggle="tab" href="#nei_ro1">Description</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#nei_ro2">Reviews(1)</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade show active border" id="nei_ro1">
                        <p class="mt-2 ml-2">On the other hand, we denounce with righteous indignation and dislike men who are so
                            beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire,
                            that they cannot foresee the pain and trouble that are bound to ensue; and equal blame
                            belongs to those who fail in their duty through weakness of will, which is the same as
                            saying through shrinking from toil and pain. These cases are perfectly simple and easy
                            to distinguish.
                        </p>
                    </div>
                    <div class="tab-pane fade border" id="nei_ro2">
                        <div class="container">
                            <h6 CLASS="py-3">2 REVIEWS FOUND</h6>
                            <div class="container">
                                <div class="media">
                                    <img src="images/author-1.jpg" class="mr-3">
                                    <div class="media-body mr-0 border">
                                        <p> <span class="fa fa-star text-warning"></span>
                                            <span class="fa fa-star text-warning"></span>
                                            <span class="fa fa-star text-warning"></span>
                                            <span class="fa fa-star text-warning"></span>
                                            <span class="fa fa-star text-warning"></span>
                                        </p>
                                        <p>Admin – june 20, 2018</p>
                                        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--                输入框-->
                        <div class="container">
                            <h6 class="mt-3">ADD A REVIEW</h6>
                            <div class="row">
                                <div class="container">
                                    <div class="row">
                                        <div class="form-group col-12 col-md-6">
                                            Name*
                                            <p><input type="text" class="form-control form-control-lg"></p>
                                        </div>
                                        <div class="form-group col-12 col-md-6">
                                            Email*
                                            <p><input type="text" class="form-control form-control-lg"></p>
                                        </div>
                                        <div class="form-group col-12 col-md-6">
                                            Website*
                                            <p><input type="text" class="form-control form-control-lg"></p>
                                        </div>
                                        <div class="form-group col-12 col-md-6">
                                            Rating
                                            <div class="rating mt-2">
                                                <a href="#" class="rate-box" title="1 Out of 5"><span class="fa fa-star"></span></a>
                                                <a href="#" class="rate-box" title="2 Out of 5"><span class="fa fa-star"></span> <span class="fa fa-star"></span></a>
                                                <a href="#" class="rate-box" title="3 Out of 5"><span class="fa fa-star"></span> <span class="fa fa-star"> </span> <span class="fa fa-star"></span></a>
                                                <a href="#" class="rate-box" title="4 Out of 5"><span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span></a>
                                                <a href="#" class="rate-box" title="5 Out of 5"><span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        Your Revlew
                                        <p><textarea type="text" class="form-control form-control-lg" rows="5"></textarea></p>
                                    </div>
                                    <button type="submit" class="btn btn-lg btn-danger an_niu2 mb-5">ADD REVIEW</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
<!--卡片轮播-->
                <div class="hm_product_wrapper">
                    <div class="container">
                        <h4 class="tu_biao">Related <span>Products</span></h4>
                        <div class="row">
                            <div class="hm_product_inner owl-carousel" id="da_div">
                                <div class="hm_pro_box item">
                                    <div class="hm_pro_img">
                                        <img src="images/pro1.jpg" alt="" class="img-responsive">
                                        <div class="pro_price_wrap">
                                            <span class="color">$89.99/-</span>
                                            <a href="#" class="btn btn-light wei"><i class="fa fa-cart-plus" aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="hm_pro_data">
                                        <h3><a href="#">Showcase Elephant</a></h3>
                                        <div class="rating">
                                            <span class="fa fa-star"></span>
                                            <span class="fa fa-star"></span>
                                            <span class="fa fa-star"></span>
                                            <span class="fa fa-star"></span>
                                            <span class="fa fa-star"></span>
                                        </div>
                                        <p>lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                                    </div>
                                </div>
                                <!--2-->
                                <div class="hm_pro_box item">
                                    <div class="hm_pro_img">
                                        <img src="images/pro2.jpg" alt="" class="img-responsive">
                                        <div class="pro_price_wrap">
                                            <span class="color">$85.99/-</span>
                                            <a href="#" class=" btn btn-light wei"><i class="fa fa-cart-plus" aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="hm_pro_data">
                                        <h3><a href="#">Showcase</a></h3>
                                        <div class="rating">
                                            <span class="fa fa-star"></span>
                                            <span class="fa fa-star"></span>
                                            <span class="fa fa-star"></span>
                                            <span class="fa fa-star"></span>
                                            <span class="fa fa-star"></span>
                                        </div>
                                        <p>lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                                    </div>
                                </div>
                                <!--3-->
                                <div class="hm_pro_box item">
                                    <div class="hm_pro_img">
                                        <img src="images/pro3.jpg" alt="" class="img-responsive">
                                        <div class="pro_price_wrap">
                                            <span class="color">$90.99/-</span>
                                            <a href="#" class=" btn btn-light wei"><i class="fa fa-cart-plus" aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="hm_pro_data">
                                        <h3><a href="#">Ladies Purse</a></h3>
                                        <div class="rating">
                                            <span class="fa fa-star"></span>
                                            <span class="fa fa-star"></span>
                                            <span class="fa fa-star"></span>
                                            <span class="fa fa-star"></span>
                                            <span class="fa fa-star"></span>
                                        </div>
                                        <p>lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                                    </div>
                                </div>
                                <!--4-->
                                <div class="hm_pro_box item">
                                    <div class="hm_pro_img">
                                        <img src="images/pro4.jpg" alt="" class="img-responsive">
                                        <div class="pro_price_wrap">
                                            <span class="color">$75.99/-</span>
                                            <a href="#" class=" btn btn-light wei"><i class="fa fa-cart-plus" aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="hm_pro_data">
                                        <h3><a href="#">Wooden Showcase</a></h3>
                                        <div class="rating">
                                            <span class="fa fa-star"></span>
                                            <span class="fa fa-star"></span>
                                            <span class="fa fa-star"></span>
                                            <span class="fa fa-star"></span>
                                            <span class="fa fa-star"></span>
                                        </div>
                                        <p>lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                                    </div>
                                </div>
                                <!--5-->
                                <div class="hm_pro_box item">
                                    <div class="hm_pro_img">
                                        <img src="images/pro5.jpg" alt="" class="img-responsive">
                                        <div class="pro_price_wrap">
                                            <span class="color">$70.99/-</span>
                                            <a href="#" class=" btn btn-light wei"><i class="fa fa-cart-plus" aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="hm_pro_data">
                                        <h3><a href="#">Paper Dolls</a></h3>
                                        <div class="rating">
                                            <span class="fa fa-star"></span>
                                            <span class="fa fa-star"></span>
                                            <span class="fa fa-star"></span>
                                            <span class="fa fa-star"></span>
                                            <span class="fa fa-star"></span>
                                        </div>
                                        <p>lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
<!--            第二部分右边-->
            <div class="col-3 col-lg-4">
<!--                搜索框 第二部分右边第一个-->
                <div class="container">
                    <div class="input-group mt-3 mt-md-0">
                        <div class="input-group-prepend">
                            <input type="text" placeholder="Search" class="kuan">
                            <button class="input-group-text shou">
                                <i class="fa icon fa fa-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
<!--             第二部分右边  第二个 -->
                <div class="container py-3 biao_hui">
                    <h4>PRODUCT CATEGORIES</h4>
                    <p class="tu_biao">———</p>
                    <div class="row">
                        <div class="col-6 py-2">
                            Funky Jewelry
                        </div>
                        <div class="col-6 tu_biao text-right py-2">
                            10
                        </div>
                        <div class="col-6 py-2">
                            Knitted Hats
                        </div>
                        <div class="col-6 tu_biao text-right py-2">
                            35
                        </div>
                        <div class="col-6 py-2">
                            Homemade Soap
                        </div>
                        <div class="col-6 tu_biao text-right py-2">
                            40
                        </div>
                        <div class="col-6 py-2">
                            Birthday Cards
                        </div>
                        <div class="col-6 tu_biao text-right py-2">
                            10
                        </div>
                        <div class="col-6 py-2">
                            Tank Tops
                        </div>
                        <div class="col-6 tu_biao text-right py-2">
                            8
                        </div>
                    </div>
                </div>
<!--             第二部分右边 第三个没有那技术没做   -->
<!--            第二部分右边 第四个-->
                <div class="container mt-3">
                    <h4>PRODUCT TAGS</h4>
                    <div>
                        <input id="tuo_dong_tiao" type="range">
                    </div>
                    <div class="an_niu3">
                        <ul>
                            <li>
                                <button class="btn btn-danger">Craft</button>
                            </li>
                            <li>
                                <button class="btn btn-danger">Decoration</button>
                            </li>
                            <li>
                                <button class="btn btn-danger">Diy</button>
                            </li>
                            <li>
                                <button class="btn btn-danger">Fashion</button>
                            </li>
                            <li>
                                <button class="btn btn-danger">Lifestyle</button>
                            </li>
                            <li>
                                <button class="btn btn-danger">General</button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!--    轮播图和剩下的部分-->
    <div class="container-fluid feng_se mt-3 col-12">
        <h2 class="py-5 text-center text-white">Our Clients</h2>
        <div class="container">
            <div id="owl-demo" class="owl-carousel py-3">
                <a class="item"><img src="images/partner1.png" alt=""></a>
                <a class="item"><img src="images/partner2.png" alt=""></a>
                <a class="item"><img src="images/partner3.png" alt=""></a>
                <a class="item"><img src="images/partner4.png" alt=""></a>
                <a class="item"><img src="images/partner5.png" alt=""></a>
                <a class="item"><img src="images/partner1.png" alt=""></a>
                <a class="item"><img src="images/partner2.png" alt=""></a>
                <a class="item"><img src="images/partner3.png" alt=""></a>
                <a class="item"><img src="images/partner4.png" alt=""></a>
                <a class="item"><img src="images/partner5.png" alt=""></a>
                <a class="item"><img src="images/partner1.png" alt=""></a>
                <a class="item"><img src="images/partner2.png" alt=""></a>
                <a class="item"><img src="images/partner3.png" alt=""></a>
                <a class="item"><img src="images/partner4.png" alt=""></a>
                <a class="item"><img src="images/partner5.png" alt=""></a>
            </div>
        </div>
    </div>
<!--    倒数第二个-->
    <div class="da_div2 yang_se5">
        <div class="container">
            <div class="row py-5">
                <div class="col-12 col-md-6 col-lg-3">
                    <img src="images/logo.png">
                    <p class="zi6">It is a long established fact that a reader will be distracted by the readable
                        content of a page when looking at its layout.</p>
                </div>

                <div class="col-12 col-md-6 col-lg-3">
                    <h5 class="zi2">Help</h5>
                    <p class="zi6">Find Your Beer</p>
                    <p class="zi6">Customer Service</p>
                    <p class="zi6">Contact</p>
                    <p class="zi6">Recent Orders</p>
                </div>

                <div class="col-12 col-md-6 col-lg-3">
                    <h5 class="zi2">Links</h5>
                    <p class="zi6">Home</p>
                    <p class="zi6">Shop</p>
                    <p class="zi6">404 Page</p>
                    <p class="zi6">Login</p>
                </div>

                <div class="col-12 col-md-6 col-lg-3">
                    <h5 class="zi2">Our Information</h5>
                    <p class="zi6">787 Lakeview St. Marion, NC 28752 </p>
                    <p class="zi6">+1800123654789 </p>
                    <p class="zi6">+1800123456788 </p>
                    <p class="zi6">Support@Handmade.Net</p>
                </div>
            </div>
        </div>
    </div>
<!--    最后一个-->
    <div class="zui_ho feng2">
        <div class="row">
            <div class="col-12 col-md-6 text-center ">
                <p class="zi6">Copyrights © 2018 All Rights <span class="text-primary">Reserved</span> by Himanshusofttech</p>
            </div>
            <div class="col-12 col-md-6 text-right zui2 text-center zi6">
                <a href="#" class="zi6"><i class="fa fa-facebook"></i></a>
                <a href="#" class="zi6"><i class="fa fa-twitter mr-2"></i></a>
                <a href="#" class="zi6"><i class="fa fa-google-plus mr-2"></i></a>
                <a href="#" class="zi6"><i class="fa fa-pinterest-p mr-2"></i></a>
                <a href="#" class="zi6"><i class="fa fa-linkedin mr-2"></i></a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        $('#owl-demo').owlCarousel({
            pagination:false
        });
    });

    var app = new Vue({
        el:'#app',
        data:{
            shu: 1
        }
    })
    //卡片轮播
    $(function(){
        $('#da_div').owlCarousel({
            item:2,
            itemsDesktop: [2000, 2],
            autoPlay: 2000,
            pagination:false
        });

    });

    window.onscroll = function (event) {
        var shang = document.documentElement.scrollTop
        var oDiv = document.getElementsByClassName("navbar-nav")[0];

        if (shang > 300){
            oDiv.style.position = "fixed";
            oDiv.style.top = "0px"
        }
        else{
            oDiv.style.position = "relative";
            oDiv.style.top = "";
        }
    }

</script>
</body>
</html>